<template>
  <div>
    <loading v-if="!this.cinemaList.length"></loading>
    <div class="cinema-box">
      <div class="cinema-head">
        <div class="current">
          <van-button color="#7232dd" @click="changeCity"
            >城市 &nbsp;{{ nowCity }}</van-button
          >
        </div>
        <h4>影院</h4>

        <div class="search"><van-icon name="search" /></div>
      </div>
      <div class="nav">
        <div class="all">全部</div>
        <div class="book-tickets">订票</div>
        <div class="recent">最近</div>
      </div>
      <ul class="cinemas">
        <li
          v-for="(item, index) in cinemaList"
          :key="'cinema' + index"
          class="cinema-info"
        >
          <div class="info-top">
            <div class="name">{{ item.name }}</div>
            <div class="price">￥{{ item.lowPrice | getPrice }}起</div>
          </div>
          <div class="info-bot">
            <div class="address">{{ item.address }}</div>
            <!-- 距离之后再做判断 -->
            <div class="distance">{{ item.Distance | getDistance }}公里</div>
            <!-- <div class="distance">距离未知</div> -->
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Loading from "@/components/Loading.vue";
export default {
  components: { Loading },
  data() {
    return {
      // 当前城市名称
      nowCity: "",
      // 影院列表
      cinemaList: [],
      // 城市列表
      cityList: [],
    };
  },

  async created() {
    // 获取电影列表
    let res = await this.$axios("seatSell/cinemaList");
    this.cinemaList = res.data.data.cinemas;
    let city = this.$route.params.cityName;
    this.nowCity = city ? city : "西安";
  },
  filters: {
    // 将价格格式化
    getPrice(price) {
      let real_prc = parseInt(price / 100);
      return real_prc;
    },
    getDistance(distance) {
      let des = distance.toFixed(2);
      return des;
    },
  },
  methods: {
    // 点击后进入到城市选择页面
    changeCity() {
      this.$router.push("/city");
    },
  },
};
</script>

<style lang="scss" scoped>
.cinema-box {
  padding-bottom: 40px;
  .cinema-head {
    display: flex;
    justify-content: space-between;
    .current,
    .search {
      width: 30vw;
      display: flex;
      font-size: 26px;
      justify-content: center;
      align-items: center;
    }
  }
  .nav {
    display: flex;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    justify-content: space-around;
  }
  .cinemas {
    .cinema-info {
      border: 1px solid #ededed;
      padding: 12px 16px;
      font-size: 12px;
      .info-top {
        display: flex;
        justify-content: space-between;
        color: #191a1b;
        font-size: 15px;
        margin-bottom: 10px;
        .price {
          color: #ff5f16;
        }
      }
      .info-bot {
        color: #797d82;
        display: flex;
        justify-content: space-between;
        .address {
          width: 60vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>